<template>
  <div class="todoapp">
    <!-- 头 -->
    <todo-header @add="add" :list="selectList"/>
    <!-- 主体 -->
    <todo-main :list="selectList" @del="del" />
    <!-- 底部 -->
    <todo-footer :list="selectList" @changeStatus="changeStatus" @clear="clear"/>
  </div>
</template>

<script>
// 导入组件
import TodoHeader from './components/TodoHeader.vue'
import TodoMain from './components/TodoMain.vue'
import TodoFooter from './components/TodoFooter.vue'
export default {
  // 注册组件
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter
  },
  watch: {
    list: {
      deep: true,
      handler() {
        // 存到本地存储
        localStorage.setItem('todos92', JSON.stringify(this.list) )
      }
    }
  },
  data () {
    return {
      list: JSON.parse(localStorage.getItem('todos92')) || [
        { id: 100, name: '吃饭', isDone: true },
        { id: 201, name: '睡觉', isDone: false },
        { id: 103, name: '打豆豆', isDone: true }
      ],
      // 保存底部谁被点的状态
      status: ''
    }
  },
  methods: {
    clear () {
      // 过滤出所有isDone为false的
      this.list = this.list.filter( v => {
        return v.isDone == false
      } )
    },
    // 当底部状态被点
    changeStatus (status) {
      this.status = status
    },
    // 添加
    add (task) {
      this.list.push({
        id: Date.now(),
        name: task,
        // 新加的东西肯定没有完成，不打钩
        isDone: false
      })
    },
    del (id) {
      // 过滤出不是这个id的所有数据组成新的数组
      // this.list = this.list.filter(v => v.id != id)
      this.list = this.list.filter(v => {
        if (v.id != id) {
          return true
        }
      })
    }
  },
  computed: {
    // 根据状态过滤后的数组
    selectList () {
      // 如果状态是未完成
      if (this.status == '未完成') {
        // 那么就返回过滤出未完成数据(isDone为false)的新数组
        return this.list.filter(v => {
          return v.isDone == false
        })
      }
      // 如果状态是已完成
      else if (this.status == '已完成') {
        // 那么就返回过滤出已完成数据(isDone为true)的新数组
        return this.list.filter(v => {
          return v.isDone == true
        })
      } else {
        // 否则就代表肯定是全部，那就直接返回完整数组(不需要过滤)
        return this.list
      }
    }
  }
}
</script>

<style></style>
